<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>会员列表</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        /* 弹窗外部容器 */
        .modal {
            display: none; /* 默认隐藏弹窗 */
            position: fixed;
            z-index: 1;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 100%;
            overflow: hidden;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
        }

        /* 弹窗内容容器 */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            max-width: 80%; /* 控制弹窗最大宽度 */
        }

        /* 关闭按钮 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        /* 输入框样式 */
        .input-field {
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-bottom: 10px;
        }

        /* 按钮样式 */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }


    </style>
</head>
<script src="../layui/layui.js"></script>
<body>

<div class="layui-container">
    <h2>会员列表</h2>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" id="username" placeholder="请输入用户名字" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button onclick="searchUser()" class="layui-btn layui-btn-radius"><i
                        class="layui-icon layui-icon-search"></i>搜索
                </button>
            </div>
            <div class="layui-input-inline">
                <button onclick="GotoAddUser()" class="layui-btn layui-btn-radius"><i
                        class="layui-icon layui-icon-addition"></i> 新增
                </button>
            </div>

        </div>
    </div>

    <table class="layui-table">
        <colgroup>
            <col width="60">
            <col width="90">
            <col width="100">
            <col width="100">
            <col width="90">
            <col width="90">
            <col width="250">
            <col width="250">
            <col width="150">
            <col width="250"> <!-- 用于按钮的新列 -->
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>账号</th>
            <th>真实姓名</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>积分</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>状态</th>
            <th>操作</th> <!-- 用于按钮的新列 -->
        </tr>
        </thead>
        <tbody id="userListContainer">
        <tr th:each="user : ${userList}" data-user-id="${user.userId}">
            <td th:text="${user.userId}"></td>
            <td th:text="${user.userName}"></td>
            <td th:text="${user.userRealname}"></td>
            <td th:text="${user.userPhone}"></td>
            <td th:text="${user.userEmail}"></td>
            <td th:text="${user.userScoreleft}"></td>
            <td th:text="${user.userCreatetime}"></td>
            <td th:text="${user.userUpdatetime}"></td>
            <td>
                <button onclick="toggleUserStatus(this)" id="toggleStatusBtn" class="layui-btn layui-btn-radius layui-btn-xs"
                        th:data-user-id="${user.userId}"
                        th:data-status="${user.userStatus}"
                        th:class="${user.userStatus == 0 ? 'layui-btn-danger' : 'layui-btn-normal'}">
                    <span th:text="${user.userStatus == 0 ? '禁用' : '启用'}"></span>
                </button>

            </td>

            <td>
                <!--                <button class="layui-btn layui-btn-sm layui-btn-radius" onclick="editUser('${user.userId}')">修改</button>-->
                <!--                <button class="layui-btn layui-btn-sm layui-btn-radius" onclick="editUser('${user.userId}', '${user.userName}', '${user.userRealname}', '${user.userPhone}', '${user.userEmail}', '${user.userScoreleft}')">修改</button>-->
                <button class="layui-btn layui-btn-xs layui-btn-radius" onclick="editUser(this)"
                        th:data-user-id="${user.userId}" th:data-username="${user.userName}"
                        th:data-realname="${user.userRealname}" th:data-phone="${user.userPhone}"
                        th:data-email="${user.userEmail}" th:data-score="${user.userScoreleft}"><i
                        class="layui-icon layui-icon-edit "></i>修改
                </button>
                <!--                <button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" onclick="deleteUser('${user.userId}')">删除</button>-->
                <button class="layui-btn layui-btn-xs layui-btn-danger layui-btn-radius" onclick="deleteUser(this)"
                        th:data-user-id="${user.userId}"><i
                        class="layui-icon layui-icon-delete"></i>删除
                </button>
<!--                <button id="toggleStatusBtn" onclick="toggleUserStatus(this)" class="layui-btn layui-btn-radius"-->
<!--                        th:data-user-id="${user.userId}"><i-->
<!--                        class="layui-icon layui-icon-edit"></i>切换状态-->
<!--                </button>-->

            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 弹窗内容---修改用户弹窗 -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <!-- 用户属性 -->
        <div>ID: <span id="userId"></span></div>
        <div>账号: <span id="usernameGet"></span></div>
        <div>真实姓名: <input type="text" id="userRealnameInput" class="input-field"></div>
        <div>手机号: <input type="text" id="userPhoneInput" class="input-field"></div>
        <div>邮箱: <input type="text" id="userEmailInput" class="input-field"></div>
        <div>积分: <input type="text" id="userScoreleftInput" class="input-field"></div>
        <div>
            <button onclick="updateUser()">保存</button>
        </div>
    </div>
</div>

<!-- 弹窗2的内容---新增用户弹窗 -->
<div id="myModal2" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <!-- 用户属性 -->
        <div><h3>新增会员</h3></div>
        <div>用户名字: <input type="text" id="AddUserNameInput" class="input-field"></div>
        <div>密码: <input type="password" id="AddUserPasswordInput" class="input-field"></div>
        <div>真实姓名: <input type="text" id="AddUserRealnameInput" class="input-field"></div>
        <div>手机号: <input type="text" id="AddUserPhoneInput" class="input-field"></div>
        <div>邮箱: <input type="text" id="AddUserEmailInput" class="input-field"></div>
        <div>积分: <input type="text" id="AddUserScoreleftInput" class="input-field"></div>
        <div>
            <button onclick="addUser()">保存</button>
        </div>
    </div>
</div>

<script>
    function searchUser() {
        console.log("点击了搜索按钮")
        var username = document.getElementById('username').value;
        // 发起请求获取符合条件的用户数据
        fetch('/kamun/admin/usersByCondition?username=' + encodeURIComponent(username))
            .then(response => {
                if (response.ok) {
                    return response.text(); // 以文本形式接收响应
                } else {
                    throw new Error('获取用户列表失败');
                }
            })
            .then(data => {
                // 查找符合条件的用户列表部分
                var userListHtml = data.match(/<tbody[^>]*>([\s\S]*?)<\/tbody>/i)[0];
                // 替换现有的用户列表部分
                document.getElementById('userListContainer').innerHTML = userListHtml;
                // 使用 LayUI 的方法渲染表格样式
                layui.table.render();
            })
            .catch(error => {
                console.error('获取用户列表出错:', error);
            });
    }

    function editUser(button) {
        var userId = button.getAttribute('data-user-id');
        var username = button.getAttribute('data-username');
        var realname = button.getAttribute('data-realname');
        var phone = button.getAttribute('data-phone');
        var email = button.getAttribute('data-email');
        var score = button.getAttribute('data-score');

        console.log("点击了修改按钮，用户ID：" + userId);

        document.getElementById('userId').innerText = userId;
        document.getElementById('usernameGet').innerText = username;
        document.getElementById('userRealnameInput').value = realname;
        document.getElementById('userPhoneInput').value = phone;
        document.getElementById('userEmailInput').value = email;
        document.getElementById('userScoreleftInput').value = score;

        // 打开弹窗
        var modal = document.getElementById('myModal');
        modal.style.display = "block";

        // 关闭弹窗
        var closeBtn = modal.querySelector('.close');
        closeBtn.onclick = function () {
            modal.style.display = "none";
        }
    }


    function updateUser() {
        var confirmed = confirm("确认修改用户信息吗？");
        if (!confirmed) {
            return; // 如果用户点击取消，则中止更新操作
        }
        console.log("点击了保存按钮");
        var userId = document.getElementById('userId').textContent;
        var updatedUser = {
            userRealname: document.getElementById('userRealnameInput').value,
            userPhone: document.getElementById('userPhoneInput').value,
            userEmail: document.getElementById('userEmailInput').value,
            userScoreleft: document.getElementById('userScoreleftInput').value
        };

        console.log("updateUser中的userId属性值为: " + userId)
        console.log("updatedUser的值为:" + JSON.stringify(updatedUser));
        // 发送更新请求到后端
        fetch('/kamun/admin/updateUser/' + userId, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(updatedUser)
        })
            // .then(response => {
            //     if (response.ok) {
            //         return response.json(); // 解析为JSON对象
            //     } else {
            //         throw new Error('更新用户失败');
            //     }
            // })
            .then(data => {
                // var viewName = data.viewName; // 假设后端返回的视图名称在JSON对象的viewName属性中
                // if (viewName === "userlist") {
                console.log('用户更新成功');
                // 关闭弹窗
                var modal = document.getElementById('myModal');
                modal.style.display = "none";
                // 重定向到用户列表页面
                window.location.href = '/kamun/admin/users';
                // } else {
                //     console.log('更新用户失败');
                //     // 其他处理逻辑...
                // }
            })
        // .catch(error => {
        //     console.error('更新用户出错:', error);
        // });

    }

    function deleteUser(button) {
        var confirmed = confirm("此操作将永久删除该会员信息,您确定要删除吗？");
        if (!confirmed) {
            return; // 如果用户点击取消，则中止更新操作
        }
        // 获取data-user-id属性的值
        var userId = button.getAttribute('data-user-id');

        // 使用fetch发送DELETE请求
        fetch(`/kamun/admin/${userId}`, {
            method: 'DELETE'
        })
        // .then(response => response.text())
        // .then(result => {
        //     // 处理响应结果
        //     if (result === 'error') {
        //         console.log('用户删除失败');
        //     } else if (result === 'userlist') {
        console.log('用户删除成功');
        // 进行相应的页面跳转或刷新操作
        // 例如：window.location.href = '/userlist';
        window.location.href = '/kamun/admin/users';
        //     }
        // })
        // .catch(error => {
        //     // 处理错误
        //     console.error('发生错误:', error);
        // });
    }

    function GotoAddUser() {
        // 控制弹窗的显示
        var modal = document.getElementById("myModal2");
        modal.style.display = "block";
        // 关闭弹窗
        var closeBtn = modal.querySelector('.close');
        closeBtn.onclick = function () {
            modal.style.display = "none";
        }
    }

    // 点击保存按钮触发的函数
    function addUser() {
        var confirmed = confirm("确定添加该会员信息到数据库中吗？");
        if (!confirmed) {
            return; // 如果用户点击取消，则中止更新操作
        }
        var userName = document.getElementById("AddUserNameInput").value;
        var userPassword = document.getElementById("AddUserPasswordInput").value;
        var userRealname = document.getElementById("AddUserRealnameInput").value;
        var userPhone = document.getElementById("AddUserPhoneInput").value;
        var userEmail = document.getElementById("AddUserEmailInput").value;
        var userScoreleft = document.getElementById("AddUserScoreleftInput").value;

        // 创建一个对象，用于存储会员信息
        var user = {
            userName: userName,
            userPassword: userPassword,
            userRealname: userRealname,
            userPhone: userPhone,
            userEmail: userEmail,
            userScoreleft: userScoreleft
        };

        // 发起 POST 请求，将会员信息发送到后端
        layui.jquery.ajax({
            url: "/kamun/admin/userAddByAdmin",
            type: "POST",
            data: JSON.stringify(user),
            contentType: "application/json"
        });
        // success: function (data) {
        //     if (data === "userlist") {
        //         // 保存成功，跳转到用户列表页面
        window.alert("新增会员成功");
        window.location.href = "/kamun/admin/users";
        //         } else {
        //             // 保存失败，处理错误逻辑
        //             alert("保存失败，请重试");
        //         }
        //     },
        //     error: function () {
        //         alert("请求失败，请重试");
        //     }
        // });
    }

    function toggleUserStatus(button) {
        var userId = button.getAttribute('data-user-id');
        var status = button.getAttribute('data-status');

        // 发送异步请求到后端，切换用户状态
        fetch(`/kamun/admin/status/${userId}`, { method: 'PUT' })
            .then(response => {
                if (response.ok) {
                    return response.text();
                } else {
                    throw new Error('切换用户状态出错');
                }
            })
            .then(newStatus => {
                // 根据返回的新状态更新按钮的文本和样式
                // button.setAttribute('data-status', newStatus);
                // button.querySelector('span').innerText = newStatus === '0' ? '禁用' : '启用';
                // button.classList.toggle('layui-btn-danger', newStatus === '0');
                var buttonText = button.querySelector('span');
                if (newStatus === 0) {
                    buttonText.innerText = '禁用';
                    // button.classList.remove('layui-btn-normal');
                    // button.classList.add('layui-btn-disabled');
                } else if (newStatus === 1) {
                    buttonText.innerText = '启用';
                    // button.classList.remove('layui-btn-disabled');
                    // button.classList.add('layui-btn-normal');
                }
                // 刷新页面
                location.reload();
            })
            .catch(error => {
                console.error(error);
            });
    }





</script>

</body>
</html>
